<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="我的合同"></xk-header>
		<view class="tabs-bar" scroll-x="true">
			<view v-for="(item, index) of tabs" :class="tabIndex === index ? 'item item-a' : 'item'" @click="clickTab(index)" >{{item.title}}</view>
		</view>
		<view class="list-info">
			<swiper @change="listInfoChange" :current="tabIndex" class="swiper-class"
				:style="{height: scrollViewHeight + 'px'}">
				<swiper-item v-for="(item, index) of tabs" :key="index">
					<scroll-view class="data-list" scroll-y="true">
						<view class="list" v-if="index === 0">
							<view class="list-item">
								<view>合同编号</view>
								<view>{{data.contract_code}}</view>
							</view>
							<view class="list-item">
								<view>合同名称</view>
								<view>{{data.contract_name}}</view>
							</view>
							<view class="list-item">
								<view>单位名称</view>
								<view>{{data.company_name}}</view>
							</view>
							<view class="list-item">
								<view>联系人</view>
								<view>{{data.company_user}}</view>
							</view>
							<view class="list-item">
								<view>联系方式</view>
								<view>{{data.company_phone}}</view>
							</view>
							<view class="list-item">
								<view>统一社会信用代码</view>
								<view>116105 005637 7320XW</view>
							</view>
							<view class="list-item">
								<view>合同签订日期</view>
								<view>{{data.sign_date}}</view>
							</view>
							<view class="list-item">
								<view>合同开始日期</view>
								<view>{{data.start_date}}</view>
							</view>
							<view class="list-item">
								<view>合同截止日期</view>
								<view>{{data.end_date}}</view>
							</view>
							<view class="list-item">
								<view>合同年限</view>
								<view>{{data.years}}年</view>
							</view>
							<view class="list-item">
								<view>租赁用途</view>
								<view>{{data.lease_purpose}}</view>
							</view>
						</view>
						<view class="contract-attach" v-if="index === 0">
							<view class="contract-title-view">
								<view>合同文书附件</view>
								<view>注：一式两份，甲乙双方各持一份</view>
							</view>
							<view class="menu">
								<view class="menu-item" v-for="item of item.attach"  style="background-color: #fff;"
									@click="menuClick(item)">
									<image class="menu-item-img" :src="(imgUrl+'/wx/pdf.png')"/>
									<text class="text">{{item.title}}</text>
								</view>
							</view>
						</view>

						<!-- 费用汇总 -->
						<view class="list" v-if="index === 1">
							<view class="list-item">
								<view>合同总面积(㎡)</view>
								<view>{{data.total_area}}</view>
							</view>
							<view class="list-item">
								<view>免租期(天)</view>
								<view>{{data.free_monthly}}</view>
							</view>
							<view class="list-item">
								<view>支付方式</view>
								<view>{{data.pay_type}}</view>
							</view>
							<view class="list-item">
								<view>水单价(元/立方)</view>
								<view>{{data.water_price | formatMoney}}</view>
							</view>
							<view class="list-item">
								<view>电单价(元/度)</view>
								<view>{{data.electric_price | formatMoney}}</view>
							</view>
							<view class="list-item">
								<view>空调费(元/度)</view>
								<view>{{data.conditioning_price | formatMoney}}</view>
							</view>
							<view class="list-item">
								<view>合同月租金(元/月)</view>
								<view>{{data.total_rent | formatMoney}}</view>
							</view>
							<view class="list-item">
								<view>管理费单价(元/㎡)</view>
								<view>{{data.manage_price | formatMoney}}</view>
							</view>
							<view class="list-item">
								<view>合同月管理费(元/月)</view>
								<view>{{data.manage_totalprice | formatMoney}}</view>
							</view>
							<view class="list-item">
								<view>总押金(元)</view>
								<view>{{data.total_deposit | formatMoney}}</view>
							</view>
							<view class="list-item">
								<view class="contract-money-title">
									<view>合同期限金额(元)</view>
									<view>公式: 合同月租金 * 合同年限</view>
								</view>
								<view class="contract-money-item">
									<view>{{data.total_contract_money | formatMoney}}</view>
									<view>金额大写:{{data.total_rent_capitalization}}</view>
								</view>
							</view>
						</view>
						<view class="contract-attach" v-if="index === 1">
							<view class="contract-money-desc">
								<view>租金递增说明:</view>
								<text>{{data.rent_increase_state}}</text>
							</view>
						</view>

						<!-- 开票信息 -->
						<view class="list" v-if="index === 2">
							<view class="list-item">
								<view>发票类型</view>
								<view>{{data.type}}</view>
							</view>
							<view class="list-item">
								<view>收票人</view>
								<view>{{data.payee_name}}</view>
							</view>
							<view class="list-item">
								<view>收票人电话</view>
								<view>{{data.payee_phone}}</view>
							</view>
							<view class="list-item">
								<view>收票地址</view>
								<view>{{data.payee_address}}</view>
							</view>
							<view class="list-item">
								<view>开户行</view>
								<view>{{data.bank}}</view>
							</view>
							<view class="list-item">
								<view>银行户名</view>
								<view>{{data.bank_name}}</view>
							</view>
							<view class="list-item">
								<view>账号</view>
								<view>{{data.bank_account}}</view>
							</view>
						</view>

						<!-- 收款账号信息 -->
						<view class="list" v-if="index === 3">
							<view class="list-item">
								<view>开户行</view>
								<view>{{data.party_bank}}</view>
							</view>
							<view class="list-item">
								<view>银行户名</view>
								<view>{{data.party_bank_name}}</view>
							</view>
							<view class="list-item">
								<view>账号</view>
								<view>{{data.party_bank_account}}</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	// let noImg = this.$config.BASE_imgUrl+'/wx/no-img.png';
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				scrollViewHeight: 0,
				tabIndex: 0,
				tabs: [{
					index: 0,
					title: "基本信息"
				},{
					index: 1,
					title: "费用汇总"
				},{
					index: 2,
					title: "开票信息"
				},{
					index: 3,
					title: "收款账号信息"
				}],
				dataList: [],
				data: {},
			};
		},
		onLoad(options){
			if (options && options.data) {
				this.data = JSON.parse(options.data)
				console.warn("合同信息：", this.data)
			}
			this.initInfo()
		},
		onShow() {
			this.$util.getHeightWithTopEl(".tabs-bar").then(height => {
				this.scrollViewHeight = height - 20;
			});
		},
		methods:{
			initInfo() {
				// this.$api.mySelf_getMyContractList().then(res=>{
				// 	console.warn("我的合同列表信息： ", res)
				// })
			},
			clickTab(index){
				this.tabIndex = index
			},
			listInfoChange(e){
				this.tabIndex = parseInt(e.target.current)
			},
			goDetail(item) {
				uni.navigateTo({
					url: "/pages/estate/estate-info"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.tabs-bar{
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	padding: 20rpx 30rpx 0rpx 30rpx;
	background-color: #FFFFFF;
	white-space: nowrap;
	.item{
		// display: inline-block;
		height: 65rpx;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #333333;
		border-bottom: 6rpx solid rgba(#2C72FF, 0);
	}
	.item-a {
		font-weight: bolder;
		border-bottom: 6rpx solid #2C72FF;
	}
}

.list-info {
	.swiper-class {
		height: 1000rpx;
	}
	.data-list{
		border-radius: 10rpx;
		height: 100%;

		.list {
			margin: 20rpx 30rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;

			.list-item-top {
				display: flex;
				justify-content: center;
				height: 50rpx;
			}
			.list-item {
				display: flex;
				flex-direction: row;
				align-items: center;

				color: #333333;
				font-size: 28rpx;
				padding: 35rpx 20rpx;

				:first-child {
					flex: 1;
				}
				.title1 {
					color: #FF3737;
					font-weight: bold;
				}

				.contract-money-title {
					display: flex;
					flex-direction: column;
					flex: 1;
					:first-child {
						font-size: 28rpx;
						color: #333;
					}
					:last-child {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
				.contract-money-item {
					display: flex;
					flex-direction: column;
					text-align: right;
					:first-child {
						font-size: 32rpx;
						font-weight: bold;
						color: #FF3737;
					}
					:last-child {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
			}
			.item-border {
				border-bottom: 1rpx #F8F8F8 solid;
			}
		}

		.contract-attach {
			margin: 20rpx 30rpx;
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			margin-top: 20rpx;

			.contract-title-view {
				display: flex;
				color: #999;
				font-size: 24rpx;
				padding: 20rpx;

				:first-child {
					flex: 1;
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
				}
			}
			.contract-money-desc {
				display: flex;
				flex-direction: column;
				color: #333;
				font-size: 28rpx;
				padding: 20rpx;
				>text {
					margin-top: 10rpx;
				}
			}

		}
	}
}

.menu {
	display: flex;
	flex: 1;
	background-color: #FFFFFF;
	padding: 17px 20rpx;
	flex-wrap: wrap;

	.menu-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		.menu-item-img {
			width: 44rpx;
			height: 41rpx;
			margin-bottom: 10rpx;
		}
		.text{
			font-size: 24rpx;
			color: #333333;
		}
	}

}
</style>
